<template>
<ContentWrap style="height: 900px;">
      <!-- 订单信息 -->
    <div class="order-item-detail">
      <div class="order-info">
         <el-row :span="24"> <el-col :span="24"><h4>订单信息</h4></el-col> </el-row>
         <el-row :span="24"> 
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="2"><span>主单号：</span></el-col>
              <el-col :span="8"><span>{{formData.no}}</span></el-col>
              <el-col :span="2"><span>子单号：</span></el-col>
              <el-col :span="8"><span>{{formData.orderItemNo}}</span></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="2"><span>订单状态：</span></el-col>
              <el-col :span="8"><dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.status" /></el-col>
              <el-col :span="2"><span>买家留言：</span></el-col>
              <el-col :span="8"><span>{{formData.remark}}</span></el-col>
            </el-row>
          </el-col> 
        </el-row>
      </div>
      <div class="order-spu">
        <el-row :gutter="20"> <el-col :span="24"><h4>商品信息</h4></el-col> </el-row>
        <el-row :gutter="20" style="height: 120px;line-height: 100px;"> 
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="2">
                <span style="display: block;height: 120px;line-height: 120px;">商品图：</span>
              </el-col>
              <el-col :span="4">
                   <div class="product_image">
                    <el-image
                        :src="formData.picUrl"
                        style="width: 100%;height: 100%;" 
                        fit="contain"
                        @click="imagePreview(formData.picUrl)"
                      >
                        <template #error>
                          <div class="image-slot">
                            <icon icon="ep:picture" />
                          </div>
                        </template>
                      </el-image>
                  </div>       
              </el-col>
              <el-col :span="18">
                <el-row :gutter="20"> 
                  <el-col :span="2"><span>商品名称：</span></el-col> 
                  <el-col :span="20"><span>{{ formData.spuName }}</span></el-col> 
                </el-row>
                <el-row :gutter="20"> 
                  <el-col :span="2"><span>规格：</span></el-col> 
                  <el-col :span="20">
                    <el-tag v-for="property in formData.properties" :key="property.propertyId" style="margin-left: 5px;" size="small">
                        {{ property.propertyName }}: {{ property.valueName }}
                    </el-tag>
                    </el-col> 
                  </el-row>
                <el-row> 
                    <el-col :span="2"><span>发货果园：</span></el-col>
                    <el-col :span="20"><span>{{ formData.orchardName }}</span></el-col> 
                  </el-row>
              </el-col>
            </el-row>
          </el-col> 
        </el-row>
        

      </div>
      <div class="order-member">
        <el-row :gutter="20"> <el-col :span="24"><h4>收货信息</h4></el-col> </el-row>
        <el-row :gutter="20"> 
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="2"><span>收货人: </span></el-col>
              <el-col :span="4"><span>{{ formData.receiverName }}</span></el-col>
              <el-col :span="2"><span>联系电话:</span></el-col>
              <el-col :span="4"><span>{{ formData.receiverMobile }}</span></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="2"><span>收货地址: </span></el-col>
              <el-col :span="10"><span>{{ formData.receiverDetailAddress }}</span></el-col>
              <el-col :span="2"><span></span></el-col>
              <el-col :span="10"><span></span></el-col>
            </el-row>
          </el-col> 
        </el-row>
      </div>
      <div class="order-express">
        <el-row :gutter="20"> <el-col :span="24"><h4>物流信息</h4></el-col> </el-row>
        <el-row :gutter="20"> 
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="2"><span>物流公司:</span></el-col>
              <el-col :span="4"><span>{{ formData.expressName }}</span></el-col>
              <el-col :span="2"><span>运单号:</span></el-col>
              <el-col :span="4"><span>{{ formData.logisticsNo }}</span></el-col>
              <el-col :span="2"> <span>发货时间:</span></el-col>
              <el-col :span="4"><span>{{ formatDate(formData.deliveryTime) }}</span></el-col>              
            </el-row>           
            <el-row :gutter="20">
              <el-col :span="24"><span>物流详情:</span></el-col>             
            </el-row>
            <el-row :gutter="20">              
              <el-col :span="24">
                <el-timeline>
                    <el-timeline-item
                      v-for="(express, index) in expressTrackList"
                      :key="index"
                      :timestamp="formatDate(express.time)"
                    >
                      {{ express.content }}
                    </el-timeline-item>
                  </el-timeline>
                  </el-col>
            </el-row>
          </el-col> 
        </el-row>
      </div>
    </div>
    <!-- <el-descriptions title="订单信息" :column="2">
      <el-descriptions-item label="主订单号: ">{{ formData.no }}</el-descriptions-item>
      <el-descriptions-item label="子订单号: ">{{ formData.orderItemNo }}</el-descriptions-item>      
      <el-descriptions-item label="订单状态: ">
        <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.status" />
      </el-descriptions-item>
      <el-descriptions-item label="买家留言: ">{{ formData.remark }}</el-descriptions-item>      
    </el-descriptions>

    <el-descriptions title="商品信息" :column="2">      
      <el-descriptions-item label="商品名称：">{{ formData.spuName }}</el-descriptions-item>
      <el-descriptions-item label="封面图: ">
        <div class="product_image">
           <el-image
              :src="formData.picUrl"
              class="!h-[50px] !w-[50px]"
              fit="contain"
              @click="imagePreview(formData.picUrl)"
            >
              <template #error>
                <div class="image-slot">
                  <icon icon="ep:picture" />
                </div>
              </template>
            </el-image>
        </div>       
      </el-descriptions-item>
      <el-descriptions-item label="规格：">
        <el-tag v-for="property in formData.properties" :key="property.propertyId" style="margin-left: 5px;" size="small">
            {{ property.propertyName }}: {{ property.valueName }}
        </el-tag>
      </el-descriptions-item>    
      <el-descriptions-item label="发货果园：">{{ formData.orchardName }}</el-descriptions-item> 
    </el-descriptions>
     -->

    <!-- <el-descriptions :column="4" title="收货信息">
      <el-descriptions-item label="收货人: ">{{ formData.receiverName }}</el-descriptions-item>
      <el-descriptions-item label="联系电话: ">{{ formData.receiverMobile }}</el-descriptions-item>
      <el-descriptions-item label="收货地址: ">
          {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
          <el-link
            v-clipboard:copy="formData.receiverAreaName + ' ' + formData.receiverDetailAddress"
            v-clipboard:success="clipboardSuccess"
            icon="ep:document-copy"
            type="primary"
          />
      </el-descriptions-item>
      
    </el-descriptions>
    <el-descriptions title="物流信息" :column="3">    
      <el-descriptions-item v-if="formData.expressName" label="物流公司: ">
          {{ formData.expressName }}
        </el-descriptions-item>
        <el-descriptions-item v-if="formData.logisticsNo" label="运单号: ">
          {{ formData.logisticsNo }}
        </el-descriptions-item>
        <el-descriptions-item v-if="formData.deliveryTime" label="发货时间: ">
          {{ formatDate(formData.deliveryTime) }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" v-if="expressTrackList.length > 0" label="物流详情: ">
          <el-timeline>
            <el-timeline-item
              v-for="(express, index) in expressTrackList"
              :key="index"
              :timestamp="formatDate(express.time)"
            >
              {{ express.content }}
            </el-timeline-item>
          </el-timeline>
      </el-descriptions-item>
    </el-descriptions> -->
</ContentWrap>
</template>
<script lang="ts" setup>
import { createImageViewer } from '@/components/ImageViewer'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as TradeOrderApi from '@/api/mall/trade/order'

const { params } = useRoute() // 查询参数
const expressTrackList = ref([]) // 物流详情
// 订单详情
const formData = ref<TradeOrderApi.OrderItemListRespVO>({})
const id = (params.id || props.id) as unknown as number
const getDetail = async () => {

  if(id) {
    console.log(id)
    console.log(6565)
    const res = await TradeOrderApi.getOrderItemDetail({id})
    if(res) {
      formData.value = res
    }
    console.log(res)
  }

}

onMounted(async () => {
  await getDetail()
  // 如果配送方式为快递，则查询物流公司
  if (formData.value.logisticsId) {
      expressTrackList.value = await TradeOrderApi.getExpressTrackList(formData.value.id!)
  }
})
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}
</script>
<style lang="scss" scoped>
.order-item-detail {
  position: relative;
  width: 100%;
  height: 100%;
  .el-row {
      height: 45px;
      line-height: 45px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
  .order-info {
    width: 100%;
    height: 120px;    
  }
  .order-spu {
    width: 100%;
    height: 180px;  
    margin-top: 15px;
     .product_image {
      width: 120px;
      height: 120px;
      display: flex;
      line-height: 120px;
    }
  }
  .order-member {
    width: 100%;
    height: 160px;  
    margin-top: 15px;
  }
  .order-express {
    width: 100%;
    margin-top: 15px;
    min-height: 260px;  
  }
}

</style>